import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components'
import {
  Good
} from '../../utils/server.interface'
import {MD_PAGE, RESOURCE_URL,} from "../../constants/api";
import Headerbar from "../components/header-bar/header-bar";
import {getHeadTop, vcmonitor} from "../../utils/tools";
import {newHttp} from "../../utils/request";
import {getGlobalData} from "../../utils/global"
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './billingdetail.scss'

type PageOwnProps = {}
type PageState = {
  loadMoreStatus: 'more' | 'noMore' | 'loading'
  searchBarTop: number
  list: Good[]
  pageSize: number
}

class BillingDetail extends Component {

  state: PageState = {
    loadMoreStatus: 'loading',
    searchBarTop: 0,
    pageSize: 10,
    list: []
  }

  async UNSAFE_componentWillMount() {
    const headTop = getHeadTop()
    const searchBarTop = headTop.statusBar > 20 ? (headTop.statusBar + headTop.top + 40) : (headTop.statusBar + headTop.top + 40)
    this.setState({searchBarTop}, async () => {
      const userData = Taro.getStorageSync('user')
      const user_uuid: string = userData.userInfo.uuid
      const list = await this.getAdds(this.page, user_uuid)
      this.setState({list})
    })
  }

  async componentDidShow() {
    vcmonitor(this);
  }

  async getAdds(page = 1, user_uuid = Taro.getStorageSync('user').userInfo.uuid) {
    const {pageSize} = this.state
    const parmasObj = {
      page: this.page,
      pageSize,
      user_uuid
    }
    const indexGoods = await newHttp.catchPost(MD_PAGE, parmasObj)
    if (indexGoods.data) {
      if (indexGoods.data.length < pageSize) {
        this.setState({loadMoreStatus: 'noMore', list: indexGoods.data})
      } else {
        this.setState({loadMoreStatus: 'more', list: indexGoods.data})
      }
      return indexGoods.data
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      const old = this.state.list
      this.page++
      const newData = await this.getAdds(this.page)
      this.setState({list: [...old, ...newData]})
    }
  }

  jump() {
    Taro.navigateTo({url: '/distributor/poster/poster?url=' + 'poster.url'})
  }

  page = 1

  render() {
    const {searchBarTop, list} = this.state
    return (
      <View className='billiing-order-root'>
        <GzhAuth />
        <View className='head-bg' style={`height: ${searchBarTop}Px;`}>
          <Headerbar title='账单明细' />
        </View>
        <View className='list-box'>
          {list && list.map((item, index) => <View key={index} className='item'>
            <View className='item-view'>
              <View className='lt'>商家名称:</View>
              <View className='rt'>{item.supplier_name}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>订单号:</View>
              <View className='rt'>{item.order_num}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>交易时间:</View>
              <View className='rt'>{item.add_date}</View>
            </View>

            <View className='item-view'>
              <View className='lt'>消费金额:</View>
              <View className='rt'>¥{item.all_fee}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>抵扣{getGlobalData()}:</View>
              <View className='rt'>{item.use_integral}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>{getGlobalData()}抵扣额:</View>
              <View className='rt'>¥{item.integral_deduction}</View>
            </View>
            <View style='border-bottom:none' className='item-view'>
              <View className='lt'>实付金额:</View>
              <View className='rt'>¥{item.total_fee}</View>
            </View>
          </View>)}
        </View>
        {list.length <= 0 && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>}
      </View>
    )
  }
}

export default BillingDetail as ComponentClass<PageOwnProps, PageState>
